<template>
  <div>

    <!--    顶部-->
    <div style="width: 100%; height: 80px;background: #f3fcff;overflow: hidden;border-bottom: #2c3e50 1px solid;">
      <div style="margin-left: 20px; width: 150px; height: 20px;margin-top: 30px;font-size: 20px;font-weight: bold;">
        已绑定的卡片
      </div>
      <el-button type="1primary" round
                 style="float: right;margin-top: -27px;margin-right: 30px;background: #4ea9cb;color: white;"
                 @click="tosecretfree">免密支付设置
      </el-button>
    </div>
    <!--    中间部分-->
    <div style="width: 100%;height: 800px;background:#f3fcff; overflow-y: auto;">
      <!--      overflow-y: auto;-->
      <div style="width: 360px;height: 620px;background: #f3fcff;margin-left: 25px;margin-top: 20px;overflow: hidden;"
           :style="{ maxHeight: contentMaxHeight, overflowY: showButton? 'hidden' : 'auto' }">
        <ul style="width: 360px;height: 620px;">
          <!--          <li style="width: 360px; height: 60px;border-bottom: #2c3e50 1px solid;" v-for="item in 15"-->
          <!--              :key="item.id">-->
          <!--            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.jqqdL_s2bx0v6J2k6iq4AQAAAA?rs=1&pid=ImgDetMain"-->
          <!--                 alt="网络异常" style="width: 50px;height: 50px;float: left;margin-top: 5px;margin-left: 5px">-->
          <!--            <span-->
          <!--                style="float: left;margin-left: 10px;margin-top: 15px;font-size: 20px;font-weight: bold;">XXXXX银行</span>-->
          <!--            <span style="float: right;margin-top: 20px;margin-right: 20px;color: blue">免密支付</span>-->
          <!--          </li>-->
          <li class="li_vessel" style="width: 360px; height: 60px;border-bottom: #2c3e50 1px solid;"
              v-for="item in userPurse"
              data-type="0"
              :key="item.id">
            <div style="width: 360px; height: 60px;display: block;unicode-bidi: isolate;" @touchstart.capture="touchStart" @touchend.capture="touchEnd"
                 @click="oneself">
              <img :src="item.bankIcon"
                   alt="网络异常" style="width: 50px;height: 50px;float: left;margin-top: 5px;margin-left: 5px">
              <span
                  style="float: left;margin-left: 10px;margin-top: 15px;font-size: 20px;font-weight: bold;">{{
                  item.bankName
                }}</span>
              <span style="float: right;margin-top: 20px;margin-right: 20px;color: blue"
                    @click="tosecretfrees(item)">{{ item.passwordFreeStatus == 1 ? '免密支付' : '' }}</span>
            </div>


            <!--              <van-button square text="删除" type="danger" @click="asyncDeleteItem(item.id)" style="  width: 64px;height: 40px;margin-top: 10px;margin-left: 4px;"/>-->

            <div class="removeBtn" @click="remove(item)">删除</div>
          </li>

        </ul>
        <button class="show-more-btn" @click="toggleContentHeight" v-if="showButton"
                style="position: absolute;bottom: 0;margin-bottom: 160px;margin-left: 135px">查看更多﹀
        </button>


      </div>


      <!--      底部-->
      <div style="width: 100%;height: 150px;position: absolute;bottom: 0;">

        <el-button type="1primary" round style="margin-top: 25px;width: 330px;background: #4ea9cb;color: white;"
                   @click="addbankcard"
        >添加卡片
        </el-button>
      </div>

    </div>
    <Tabbar/>
  </div>
</template>

<script>
import Tabbar from "@/components/Tabbar.vue"
import {walletfindAll,deletewallet} from '@/components/api/wallet/wallet';


// @zhaomingshuo
export default {
  components: {
    Tabbar,
  },
  data() {
    return {
      contentMaxHeight: '620px',
      showButton: true,
      userPurse: null,
      startX: 0, //滑动开始
      endX: 0, //滑动结束
    };
  },
  methods: {
    // 向左滑动出现删除按钮时，点击商品信息区域取消删除
    oneself() {
      console.log("向左滑动出现删除按钮时，点击商品信息区域取消删除")
      if (this.checkSlide()) {
        this.restSlide();
      } else {
        // 点击商品信息弹出弹框
        console.log("点击当前商品触发事件...");
      }
    },
    //滑动开始
    touchStart(e) {
      // 记录初始位置
      this.startX = e.touches[0].clientX;
      console.log("滑动开始")
    },
    //滑动结束
    touchEnd(e) {
      console.log("滑动结束")
      // 当前滑动的父级元素
      let parentElement = e.currentTarget.parentElement;
      // 记录结束位置
      this.endX = e.changedTouches[0].clientX;
      console.log("1")
      // 左滑大于30距离删除出现
      if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
        this.restSlide();
        console.log("2")
        parentElement.dataset.type = 1;
      }
      // 右滑
      if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
        console.log("3");
        this.restSlide();
        parentElement.dataset.type = 0;
      }
      console.log("4");
      this.startX = 0;
      this.endX = 0;
    },
    //复位滑动状态
    restSlide() {
      console.log("复位滑动状态")
      let listItems = document.querySelectorAll(".li_vessel");
      // 复位
      for (let i = 0; i < listItems.length; i++) {
        listItems[i].dataset.type = 0;
      }
    },
    //判断当前是否有滑块处于滑动状态
    checkSlide() {
      console.log("判断当前是否有滑块处于滑动状态")
      let listItems = document.querySelectorAll(".li_vessel");
      for (let i = 0; i < listItems.length; i++) {
        if (listItems[i].dataset.type == 1) {
          return true;
        }
      }
      return false;
    },


    remove(itme) {
      console.log("111", itme);
      deletewallet(itme.id).then(res => {
        console.log(res);
        if (res.data == 1) {
          this.walletfindall();
        }
      })


    },
    // 跳转添加银行卡页面
    addbankcard() {
      this.$router.push({
        path: '/bankcard',
      })
    },
    // 跳转免密支付页面
    tosecretfree() {
      this.$router.push({
        path: '/secretfree',
      })
    },
    // 免密支付跳转页面弹出关闭免密支付按钮
    tosecretfrees(item) {
      this.$router.push({
        name: '/secretfree',
        params: {item: item}
      })
    },
    // 查看更多
    toggleContentHeight() {
      if (this.contentMaxHeight === 'none') {
        this.contentMaxHeight = '620px';
        this.showButton = true;
      } else {
        this.contentMaxHeight = 'none';
        this.showButton = false;
      }
    },
    // 查询用户所有银行卡
    walletfindall() {
      var user = JSON.parse(window.localStorage.getItem("personalUser"));
      if (user == null) {
        this.$router.push({
          path: '/',
        })
        return;
      }
      walletfindAll(user.id).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.userPurse = res.data;
          console.log(res.data);
        } else {
          this.$message({
            message: "网络异常",
            type: 'error'
          });
        }
      })
    },
  },
  created() {
    this.walletfindall();
  }
};
</script>
<style scoped>


.show-more-btn {
  display: block;
  margin-top: 10px;
  cursor: pointer;
}

.right {

  width: 120px;

  height: 34px;

  margin-left: auto;

  margin-right: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: #4EA9CB;

  font-weight: bold;

  color: white;

  border-radius: 25px;
}

.li_vessel {
  /* 全部样式 0.2秒 缓动*/
  transition: all 0.2s;
}

/* =0隐藏 */
.li_vessel[data-type="0"] {
  transform: translate3d(0, 0, 0);
}

/* =1显示 */
.li_vessel[data-type="1"] {
  /* -64px 设置的越大可以左滑的距离越远，最好与下面删除按钮的宽度以及定位的距离设置一样的值*/
  transform: translate3d(-60px, 0, 0);
}

/* 删除按钮 */
.li_vessel .removeBtn {
  width: 60px;
  height: 60px;
  background: #ff4949;
  color: #fff;
  position: absolute;
  z-index: 999;
  top: 0px;
  right: -60px;
  text-align: center;
  line-height: 60px;
  text-align: center;
  border-radius: 2px;

}
ul {
  /* 消除 ul 默认样式 */
  list-style: none;
  padding: 0;
  margin: 0;
}


</style>